<template>
	<view class="content">
		<u-bar-height></u-bar-height>
		<u-search-input :show="true" :action="false" :words="'歌手、歌曲'"></u-search-input>
		
		<view class="hot_box">
			<uni-section title="热搜榜" type="line">
				<view class="hot_box_item_box">
					<view class="hot_box_item" v-for="(item, index) in hotList" :key="index" @click="choose(item.searchWord)">
						<view class="number" :class="{'red-text': index<3}">{{index+1}}</view>
						<view class="searchWord" :class="{'text-bolder': index<3}">{{item.searchWord}}</view>
						<view class="iconUrl" v-if="item.iconUrl"><image :src="item.iconUrl" mode=""></image></view>
					</view>
				</view>
			</uni-section>
		</view>
	</view>
</template>

<script>
	import {hot} from '@/API/API.js';
	import util from '@/utils/util.js';
	export default {
		data(){
			return{
				keyword: '',
				showSearchSuggestBox: false,
				searchTitle: '',
				suggestList: [],
				hotList: []
			}
		},
		
		onLoad() {
			this.hot();
		},
		
		methods: {	
			choose(e){
				util.jump('navigateTo', '/pages/search/searchResult?keyword=' + e);
			},
			
			hot(){
				hot().then(data => {
					let result = data.data;
					let itemArr = [];
					result.forEach(val => {
						let itemObj = {};
						itemObj['searchWord'] = val.searchWord;
						itemObj['iconType'] = val.iconType;
						itemObj['iconUrl'] = val.iconUrl;
						
						itemArr.push(itemObj);
					});
					
					this.hotList = itemArr;
				})
			}
		}
	}
</script>

<style>
	@import url("@/static/css/iconfont.css");
	.hot_box{
		width: 100%;
		margin-top: 1px;
	}
	
	.hot_box .hot_box_item_box{
		display: flex;
		flex-wrap: wrap;
		padding: 0 10px 20px 10px;
	}
	
	.hot_box .hot_box_item_box .hot_box_item{
		width: 50%;
		display: flex;
		padding-bottom: 10px;
	}
	
	.hot_box .hot_box_item_box .hot_box_item .number{
		width: 14%;
	}
	
	.hot_box .hot_box_item_box .hot_box_item .searchWord{
		font-size: 13px;
	}
	
	.hot_box .hot_box_item_box .hot_box_item .iconUrl{
		width: 10%;
		height: 10px;
		margin-left: 2%;
	}
	
	.hot_box .hot_box_item_box .hot_box_item .iconUrl image{
		width: 100%;
		height: 100%;
	}
</style>